<template>
	<div class="uploadBtn" :style="{width,height}" @click="createInputFile">
		<!-- <van-uploader :before-read="beforeRead" :after-read="submitServer" :preview-image="false" :max-count="1">
			{{text}}
		</van-uploader> -->
		{{text}}
	</div>
</template>

<script>
	import { reactive,toRefs } from 'vue'
	import {useStore} from 'vuex'
	import {Uploader as vanUploader} from 'vant';
	import { toast } from '@/utils/common'
	export default {
		components:{
			vanUploader
		},
		props:{
			value:'',
			text:String,
			width:String,
	 		height:String,
			disabled:{
				type: Boolean,
				default(){
				    return false  // 默认
				}
			},
			isUploadServer:{// 是否立即上传服务器
				type:Boolean,
				default(){
				    return false  // 默认
				}
			}  
		},
		setup(props,context){
			const store = useStore()
			const state = reactive({
				imageUrl:'',
				fileObject:''
			})

			const beforeRead = (file)=>{
				console.log(file)
				if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.name)) {
					toast('只能上传图片')
					return false
				}
				if(file.size>5*1024*1000){
					toast('图片大小不能超过5M')
					return false
				}
				return true;
			}

			const submitServer = o =>{
				//console.log("fileList:",this.fileList[0].file)  // o.file== this.fileList[0].file
				const file = o.file
				return new Promise((resolve, reject) =>{
					let fromData = new FormData()
					fromData.append('file', file)
					store.dispatch('arApi/upload_file',fromData)
					.then(res =>{
						if(res.success){
							state.imageUrl = res.url
							context.emit('input',res.url)   // 通过 input 事件带出数值 
							context.emit('success',res)  // 触发上传成功事情
						}else{
							return toast('上传失败，请重试!')
						}
						resolve(res)
					})
					.catch(err => {
						console.log(err)
						resolve(false)
					})
				})
			}

			const createInputFile = ()=>{
				const InputFile = document.createElement('input')
				InputFile.setAttribute('type','file')
				InputFile.setAttribute('accept','image/*')
				document.querySelector('body').appendChild(InputFile)
				const a=document.createEvent("MouseEvents")
	            a.initEvent("click", true, true)
				InputFile.dispatchEvent(a)

				InputFile.addEventListener('change',e=>{
					let file = e.target.files[0]
					submitServer({file})
				})
			}
		
			return {
				...toRefs(state),
				beforeRead,
				submitServer,
				createInputFile
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.uploadBtn {
		display: inline-block;
		height: 56px;
		line-height: 56px;
		border: 0;
		position: relative;
		z-index: 10;
		overflow: hidden;
		text-align: center;
		background: #0E6161;
		border-radius: 26px;
		font-size: 26px;
		padding: 0 30px;
		input{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 15;
			left: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
			&:disabled{
				cursor: not-allowed;
			}
		}
		&.textBtn{
			background: none;
			font-size: 28px;
			font-weight: 400;
			padding:0;
			line-height: normal;
			height: 100%;
			width: 100%;
			border-radius:0
		}
	}
</style>
